<template>
    <Header />
    <div class="ai-view">
        
        
        <div class="main-grid">
            <!-- 左侧会话菜单 -->
            <div class="left-column">
                <SessionMenu />
            </div>
            
            <!-- 右侧聊天区域 -->
            <div class="right-column">
                <!-- 上方消息显示区域 -->
                <div class="messages-section">
                    <ChatWindow />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import ChatWindow from '@/components/ChatWindow.vue'
import Header from '@/components/Header.vue'
import SessionMenu from '@/components/SessionMenu.vue'
</script>

<style lang="scss" scoped>
.ai-view {
    display: flex;
    width: 80vw;
    flex-direction: column;
    height: 94vh;
    overflow: hidden;
    margin: 0 auto;
    width: 80vw;
}

.main-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    flex: 1;
    overflow: hidden;
}

.left-column {
    border-right: 1px solid #ddd;
    background-color: #f9f9f9;
    overflow-y: auto;
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
        width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }
}

.right-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.messages-section {
    flex: 1;
    overflow: hidden;
}
</style>